<template>
    <el-card style="width: 500px;">
        <el-form label-width="70px">
            
            <el-form-item>
                <el-upload
                action=""
                list-type="picture-card"
                :auto-upload="false"
                :limit="Number(1)"
                :http-request="myUpload"
                :file-list="imgfile"
                ref="upload1"
                :on-success="imgSuccess"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
            <el-form-item label="身份">
                <el-input v-model="form.u_type" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="用户名">
                <el-input v-model="form.u_name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="form.u_email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="地址">
                <el-input v-model="form.u_address" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <el-form>
            <el-button class="btn222" type="primary" @click="submitUpload(1)">确 定</el-button>
        </el-form>
    </el-card>
</template>

<script>
import axios from 'axios';
export default{
    data(){
        return{
            form: {
                u_avatar:'',
                u_name:'',
                u_email:'',
                u_address:'',
                u_id:0,
                u_type:''
                
            },
            user:'',
            imageUrl:'',
            dialogImageUrl: '',
            dialogVisible: false,
            imgfile:[],
            imgfile2:[]
        }
    },
    created(){
        this.load();
    },
    mounted(){
      this.load();
    },
    methods:{
        load(){
          this.imgfile=[];
            this.user=JSON.parse(sessionStorage.getItem("loginUser"));
            
            this.form.u_name=this.user.username;
            this.form.u_id=this.user.userid;
            this.form.u_email=this.user.email;
            this.form.u_address=this.user.address;
            this.form.u_avatar=this.user.avatar;
            this.imgfile.push({name:"123.jpg", url:this.user.avatar});
            
            if(this.user.type==0){
                this.form.u_type="普通用户";
            }else if(this.user.type==1){
                this.form.u_type="管理员";
            }else{
                this.form.u_type="领养人";
            }
            
            
        },
        save() {
            
            var param=new URLSearchParams();
            param.append("userid",this.form.u_id);
            param.append("username",this.form.u_name);
            param.append("email",this.form.u_email);
            param.append("address",this.form.u_address);
            param.append("phone",this.user.phone);
            param.append("gender",this.user.gender);
            param.append("status",this.user.status);
            param.append("type",this.user.type);
            param.append("intro",this.user.intro);
            param.append("avatar",this.user.avatar);
            param.append("password",this.user.password);
            axios({
                url:"http://localhost:8080/user/updateUser",
                method:"put",
                data:param
            }).then(obj => {
                console.log(obj);
                if(obj.data){
                    this.$message.success("修改成功");
                    this.$router.push("/Manage/first");
                        
                }else{
                    this.$message.error("修改失败");
                }
            })
        },


        handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },

      imgSuccess(res, file) {
      this.dialogImageUrl=res.data;
      this.form.image=this.dialogImageUrl;
      console.log(res.data);
      //这里我是用一个fileList数组存取，当保存的时候进行图片路径处理
    },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      submitUpload(value){
        
        if(value==1){
            this.$refs["upload1"].submit();
        }
      },
      myUpload(content){
        var param=new FormData();
        param.append("uploadFile",content.file);
        axios({
            url:"http://localhost:8080/user/upload",
            method:"post",
            data:param
        }).then(obj=>{
            this.$message.success(obj.data.message);
            if(obj.data.status==1){
                
                this.dialogImageUrl=obj.data.data;
                console.log(this.dialogImageUrl);
                this.user.avatar=(this.dialogImageUrl);
                console.log(this.user.avatar);
                this.save();
            }
        })
      }
    }
}
</script>

<style>

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius:50%;
    clear: both;
    margin: auto;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
  .avatar {
    width: 50px;
    height: 50px;
    display: block;
    
  }
  .btn222 {
    margin-left: 180px;
    width: 100px;
  }
</style>